<template>
  <el-dialog
    title="复制主题树"
    :visible.sync="visible"
    width="600px"
    append-to-body
    :close-on-click-modal="false"
    v-loading="copyLoading"
    element-loading-text="正在复制主题中"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-form
      ref="copyParentBranchSubjectsForm"
      :model="form"
      :rules="rules"
      label-width="190px"
    >
      <el-form-item label="源网点" prop="sourceBranchCode">
        <treeselect
          v-model="form.sourceBranchCode"
          :options="branchDataOptions"
          :normalizer="normalizer"
          placeholder="请选择源网点"
          noOptionsText="暂无选项"
          noResultsText="没有匹配的搜索结果"
        />
      </el-form-item>
      <el-form-item label="源网点主题系统类型" prop="sourceSystemType">
        <el-select v-model="form.sourceSystemType" style="width: 100%">
          <el-option v-for="item in systemTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <div class="line"></div>
      <el-form-item label="目标网点" prop="targetBranchCode">
        <treeselect
          v-model="form.targetBranchCode"
          :options="branchDataOptions"
          :normalizer="normalizer"
          placeholder="请选择目标网点"
          :disabled="!form.sourceBranchCode"
          noOptionsText="暂无可选网点，请先在网点管理创建网点！"
          noResultsText="没有匹配的搜索结果"
        />
      </el-form-item>
      <el-form-item label="目标网点主题系统类型" prop="targetSystemType">
        <el-select v-model="form.targetSystemType" style="width: 100%">
          <el-option v-for="item in systemTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <div class="right-wrap">
        <el-button type="primary" @click="handleCopyParentBranchSubjects">确 定</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {copyParentBranchSubjects} from "@/api/items/subject";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "CopySubjectTree",
  components: {Treeselect},
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      copyLoading: false,
      form: {
        sourceBranchCode: null,
        sourceSystemType: null,
        targetBranchCode: null,
        targetSystemType: null
      },
      rules: {
        sourceBranchCode: [
          {required: true, message: "源网点不能为空", trigger: "blur"}
        ],
        sourceSystemType: [
          {required: true, message: "源网点主题系统类型不能为空", trigger: "blur"}
        ],
        targetBranchCode: [
          {required: true, message: "目标网点不能为空", trigger: "blur"}
        ],
        targetSystemType: [
          {required: true, message: "目标网点主题系统类型不能为空", trigger: "blur"}
        ]
      },
      systemTypeOptions: [
        {value: 1, label: '门户'},
        {value: 2, label: '填表系统'},
        {value: 3, label: '表单电子范例系统'},
        {value: 4, label: '智能查询系统'},
        {value: 5, label: '表单验收系统'},
      ],
    }
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        // 关闭时重置
        if (!val) this.reset();
        this.$emit("input", val);
      }
    },
    // 网点树形数据
    branchDataOptions() {
      return this.$store.state.device.branchDataOptions || []
    },
  },
  methods: {
    reset() {
      // 重置表单信息
      this.form = {
        sourceBranchCode: null,
        sourceSystemType: null,
        targetBranchCode: null,
        targetSystemType: null
      };
      // 表单重置为初始值并移除校验结果
      this.resetForm("copyParentBranchSubjectsForm");
    },
    // 复制父网点编码
    handleCopyParentBranchSubjects() {
      this.$refs.copyParentBranchSubjectsForm.validate((valid) => {
        if (valid) {
          if (this.form.targetBranchCode === this.form.sourceBranchCode &&
            this.form.sourceSystemType === this.form.targetSystemType
          ) {
            return this.$modal.msgError("源网点和目标网点相同，主题类型不允许选择相同！");
          }
          this.copyLoading = true;
          copyParentBranchSubjects(this.form).then(response => {
            this.copyLoading = false;
            this.$modal.msgSuccess("复制成功！");
            this.$emit('getList')
            this.visible = false;
          }).catch(err => {
            this.copyLoading = false;
          });
        }
      })
    },
    /** 转换分组树形图数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.branchCode,
        label: node.branchName,
        children: node.children || undefined,
      };
    },
  },

}
</script>

<style lang="scss" scoped>
.line{
  width: 100%;
  height: 1px;
  margin: 20px 0;
  background: #dfe4ed;
}
</style>
